<template>
    <view class="viewport">
        <uv-navbar title="" leftText="返回" bgColor="transparent" @leftClick="back">
            <template #left>
                <view class="flex align-center left-box">
                    <uv-icon name="arrow-left" size="20"></uv-icon>
                </view>
            </template>
        </uv-navbar>
        <view class="bg-glass radius shadow drop-shadow mx-4 mt-6 p-4 item">
            <view class="flex justify-center p-2">
                <uv-image src="/static/images/logo_icon.png" height="80" width="80"></uv-image>
            </view>
            <uv-search placeholder="搜索艺人/活动/聚会..." :showAction="false" v-model="searchForm.search" clearabled
                @search="onSearch" @clear="onClear"></uv-search>
        </view>

        <view class="bg-glass radius shadow drop-shadow mx-4 mt-4 p-4 search-result">
            <view class="flex justify-center" style="min-height: 320rpx;">
                <canvas canvas-id="chart" :style="{ height: chartCfg.height + 'px', width: chartCfg.width + 'px' }" />
            </view>
            <uv-load-more v-if="searchForm.searching" :status="searchForm.loadingStatus" nomore-text="暂无结果"
                loadingText="正在搜索" />
            <uv-cell-group v-if="searchForm.results.length">
                <uv-cell :title="item.name" :arrow="false" v-for="item in searchForm.results" :key="item.id"
                    @click="to(item.url)">
                    <template #right-icon>
                        <uv-icon name="arrow-right"></uv-icon>
                    </template>
                </uv-cell>
            </uv-cell-group>
        </view>
    </view>
</template>
<script setup lang="ts">
import uCharts from '@qiun/ucharts'
import { ref, reactive, nextTick, getCurrentInstance } from 'vue'
import { onReady } from '@dcloudio/uni-app';
import { themeColor } from '@/utils';
import { getWordCloudChart, globalSearch } from '@/services/report'

const { ctx } = getCurrentInstance()

const searchForm = ref({
    search: '',
    loadingStatus: 'loading',
    searching: false,
    results: []
})

const chartCfg = reactive({
    height: 100,
    width: 100,
    chartIns: null,

})

onReady(() => {
    nextTick(() => {
        ctx.$uv.getRect('.search-result').then(({ height, width }) => {
            chartCfg.height = height.toFixed(0)
            chartCfg.width = width.toFixed(0)

            getWordCloudChart().then(data => {
                chartCfg.chartIns = new uCharts({
                    type: "word",
                    color: [themeColor, "#666", "#888", "#EE6666"],
                    context: uni.createCanvasContext('chart'),
                    width: chartCfg.width,
                    height: chartCfg.height,
                    background: 'transparent',
                    series: Object.entries(data).map(p => {
                        return {
                            name: p[0],
                            textSize: p[1],
                            data: undefined
                        }
                    }),
                    animation: true,
                    extra: {
                        word: {
                            type: "normal",
                            autoColors: false
                        }
                    }
                })
            }).catch(() => { })

        })
    })

})

const to = (url) => {
    uni.navigateTo({
        url
    })
}

const back = () => {
    uni.navigateBack()
}
const onSearch = () => {
    searchForm.value.searching = true
    searchForm.value.loadingStatus = 'loading'
    globalSearch({ search: searchForm.value.search }).then(data => {
        searchForm.value.results = data
        if (data.length == 0) {
            searchForm.value.loadingStatus = 'nomore'
        } else {
            searchForm.value.searching = false
        }
    }).catch(() => { searchForm.value.searching = false }).finally(() => { })
}

const onClear = () => {
    searchForm.value.searching = false
    searchForm.value.results = []
}
</script>
<style scoped>
.item {}

.viewport {
    height: 100vh;
    background-image: url('/content/app/search-bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.bg-glass::before {
    background-image: url('/content/app/search-bg.jpg');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
}

.bg-glass::after {
    background-color: rgba(255, 255, 255, 0.5);

}
</style>